<template>
  <div style="margin-top:-20px;">
    <a-card :bordered="false">
      <a-tabs tab-position="left" style="margin-top:10px" @change="callBack">
        <a-tab-pane key="1">
          <span slot="tab">
            <a-icon type="android" />
            导入列表
          </span>
          <div style="display:flex;flex-direction:row">
            <a-button v-if="examineType!=1" style="margin: 20px 0 0 20px" type="primary" @click="addEvent">
              添加数据
            </a-button>
            <a href="http://gangmao.oss-cn-shenzhen.aliyuncs.com/fzydd/excel/视频.xlsx">
              <a-button style="margin: 20px 0 0 20px" type="primary">
                模板下载
              </a-button>
            </a>
            <div style="display:flex;flex-direction: column;" v-if="examineType!=1">
            <a-upload name="file" :multiple="true" :data="uploadInfo" :action='uploadFile.url' :headers="headers" :beforeUpload="beforeUpload()" @change="handleChangeupload">
              <a-button style="margin: 20px 0 0 20px" type="primary">
                批量导入
              </a-button>
            </a-upload>
            <a-alert v-show="errorMessageShow" style="margin: 10px 0 0 20px" type="error" :message="errorMessage" banner /> 
            </div>
           
          </div>
           
          <!-- 表格 -->

          <a-table @change="pageShow" :loading="tableLoading" style="margin: 10px 20px 20px 20px" :columns="columnstable" :data-source="data" bordered size="middle" :scroll="{ x:true,  }" :pagination="pagination">
            <template slot="operation" slot-scope="text, record">
              <a @click="detailsEvent(record.id)" v-if="examineType ==3 || examineType ==4">详情</a>
              <a-divider type="vertical" v-if="examineType ==3 || examineType ==4" />
              <a v-if="examineType ==3 || examineType ==4" @click="modifyEvent(record.id,record.audit)">编辑</a>
              <a-divider type="vertical" v-if="examineType ==3 || examineType ==4" />
              <a v-if="examineType ==3 || examineType ==4" @click="deleteEvent(record.id)">删除</a>
            </template>

            <template slot="action3" slot-scope="text, record">
              <a v-if="examineType ==3 || examineType ==4" @click="dwexamineEvent(record.id,record.annex)">通过</a>          
            </template>

            <template slot="action1" slot-scope="text, record">
              <a-upload v-if="examineType ==3 || examineType ==4" :showUploadList="false" :beforeUpload="fujianbeforeUpload" @change="handleChange">
                <a style="color:black" @click="sendId(record.id)">
                  <a-icon type="upload" />上传附件
                </a>
              </a-upload>
              <br>
              <div style="height:10px" v-if="examineType ==3 || examineType ==4 && record.annex!=null"></div>
              <a :href="record.annex" v-if="examineType ==3 || examineType ==4 && record.annex!=null">{{fileCutting(record.annex)}}</a>
            </template>


            <template slot="audit" slot-scope="text, record">
              <span v-if="text == -1">未审核</span>
              <span v-else>{{record.remark}}</span> 
            </template>
            

          </a-table>
        </a-tab-pane>

        <!----------- -----------------------------------审核列表---------------------------------- --------------------->
        <a-tab-pane key="2">
          <span slot="tab">
            <a-icon type="android" />
            审核列表
          </span>
          <div style="height:50px"></div>
          <a-table @change="pageShow" :loading="tableLoading" style="margin: 10px 20px 20px 20px" :columns="newcolumnstable" :data-source="data" bordered size="middle" :scroll="{ x:true,  }" :pagination="pagination">
            <template slot="action1" slot-scope="text, record">
              <a-upload v-if="examineType ==3 || examineType ==4" :showUploadList="false" :beforeUpload="fujianbeforeUpload">
                <a style="color:black" @click="sendId(record.id)">
                  <a-icon type="upload" />上传附件
                </a>
              </a-upload>
              <br>
              <div style="height:10px"></div>
              <a :href="record.annex" v-if="record.annex" >{{fileCutting(record.annex)}}</a>
            </template>


             <template slot="action3" slot-scope="text, record">
                <a @click="detailsEvent(record.id)">详情</a>
              <a-divider type="vertical" />
              <a v-if="examineType ==1 || examineType ==2 || examineType ==4" @click="examineEvent(record.id,record.annex)">通过</a>    
              <a-divider type="vertical" v-if="examineType ==1 || examineType ==2 || examineType ==4"/> 
               <a v-if="examineType ==1 || examineType ==2 || examineType ==4" @click="rejectEvent(record.id)">驳回</a>
              <a-divider type="vertical" v-if=" examineType ==4"/>       
               <a v-if="examineType ==3 || examineType ==4" @click="quxiaoEvent(record.id)">取消</a>
            </template>
          </a-table>

        </a-tab-pane>
      </a-tabs>

      <!-- -------//进度条----- -->
      <OSSVUE v-if="visiblejindu" v-bind:file="fileData" @uploadSuccessEvent="uploadSuccessEvent"></OSSVUE>
      <!-- 添加数据 -->
      <AddStandardVideo v-if="addShow" @cancelEvent="cancelEvent" @successEvent="successEvent"></AddStandardVideo>
      <!--/ //修改数据 -->
      <ModifyStandard v-if="modifyShow" @cancelEvent="cancelEvent" v-bind:id="id" @successEvent="successEvent"></ModifyStandard>
      <!-- 详情 -->
      <StandVideoDetails v-if="detailsShow" @cancelEvent="cancelEvent" v-bind:id="id"></StandVideoDetails>
    </a-card>
  </div>
</template>

<script>
import moment from 'moment'
import { ACCESS_TOKEN, ROLE_NAME ,USERINFO} from '@/store/mutation-types'
import Vue from 'vue'
import { getList, modifyVideoStatus, setStandardVideoAnnex, deleteManageVideo } from '@/api/video'
import { getBase64, UploadToOss } from '@/utils/oss'
import ModifyStandard from '@/views/videoManage/maintenanceResources/resourceEntry/modifyStandard'
import StandVideoDetails from '@/views/videoManage/maintenanceResources/resourceEntry/standVideoDetails'
import AddStandardVideo from '@/views/videoManage/maintenanceResources/resourceEntry/addStandardVideo'
import OSSVUE from '@/views/videoManage/oss'
import { getNowTime, getNowFormatDate } from '@/utils/util.js'
const data = []
export default {
  components: { ModifyStandard, AddStandardVideo, OSSVUE, StandVideoDetails },
  inject: ['reload'],
  data() {
    return {
      flag:3,
      country:'',
      uploadInfo:{
       memberId:""
      },
      errorMessageShow:false,
      errorMessage:"",
      fileName: '',
      fileData: '',
      visiblejindu: false,
      addShow: false,
      detailsShow: false,
      modifyShow: false,
      columnstable,
      newcolumnstable,
      data,
      searchData: [],
      visible: false,
      confirmLoading: false,
      mdl: null,
      advanced: false,
      queryParam: {},
      selectedRowKeys: [],
      selectedRows: [],
      checkList: [],
      uploadFile: {
        id: 1, //非必填 添加项
        name: '',
        url: '/api/import/manage/video',
        file: '',
        status: '未上传',
        desc: '',
      },
      headers: {
        authorization: Vue.ls.get('ACCESS_TOKEN'),
      },
      pagination: {
        total: 0,
        showTotal: (total) => `共有 ${total} 条数据`,
      },
      current: 1,
      pageSize: 10,
      tableLoading: false,
      startTime: '',
      endTime: '',
      id: '',
      examineType: 1,
      linshiId: 0,
    }
  },
  filters: {},
  created() {},
  computed: {},
  mounted() {
    if (Vue.ls.get(ROLE_NAME) == '区县公司') {
      this.examineType = 1 
      this.country = Vue.ls.get(USERINFO).belong
    } else if (Vue.ls.get(ROLE_NAME) == '市公司') {
      this.examineType = 2
      this.country = Vue.ls.get(USERINFO).belong
    } else if (Vue.ls.get(ROLE_NAME) == '代维单位') {
      this.examineType = 3
      this.uploadInfo.memberId = Vue.ls.get(USERINFO).id
    } else if (Vue.ls.get(ROLE_NAME) == '管理员') {
      this.examineType = 4
    } else {
      this.examineType = 5
    }
    this.getDataInfoFunction()
  },
  methods: {
    //删除
    deleteEvent(id) {
      this.$confirm({
        title: '提示',
        content: '确定要删除吗?',
        onOk: () => {
          deleteManageVideo(id).then((response) => {
            if (response != undefined) {
              if (response.code == 200) {
                let type = 'success'
                this.$notification[type]({
                  message: '温馨提示',
                  description: '删除成功!',
                  duration: 3,
                })
                this.getDataInfoFunction()
              }
            }
          })
        },
        onCancel() {},
      })
    },

    //自定义上传前
    beforeUpload(record) {
      this.headers.authorization = Vue.ls.get('ACCESS_TOKEN')
    },
    //数据导入
    handleChangeupload(info) {
      let fileList = [...info.fileList]
      if (info.file.status === 'uploading') {
      }
      if (info.file.status === 'done') {
        if (info.file.response.code == 200) {
          this.$message.success(`${info.file.name}文件,上传成功`)
          this.getDataInfoFunction()
        } else {
          this.errorMessage = `${info.file.name}文件,上传失败:${info.file.response.msg}`
          this.$message.error(`${info.file.name}文件,上传失败:${info.file.response.msg}`)
          this.errorMessageShow = true
        }
      } else if (info.file.status === 'error') {
        this.errorMessage = `${info.file.name}文件,上传失败.`
        this.$message.error(`${info.file.name}文件,上传失败.`)
        this.errorMessageShow = true
      } else if (info.file.status === 'removed') {
        this.errorMessage = ''
        this.errorMessageShow = false
      }
    },
    handleChange() {},
    //上传附件
    fujianbeforeUpload(file) {
      if (file != undefined) {
        this.visiblejindu = true
        this.fileData = file
        return false
      }
    },
    // 附件上传成功
    uploadSuccessEvent(data) {
      let name = data.name
      let annex = `http://gangmao.oss-cn-shenzhen.aliyuncs.com/${name}`
      this.visiblejindu = false
      this.uploadingFunction(annex, this.linshiId)
    },
    //附件切割
    fileCutting(data) {
      if(data==null){
        return ''
      }else{
        let arr = data.split('/')
        return arr[5]
      }    
    },
    /**
     * 上传附件api
     */
    uploadingFunction(url, id) {
      setStandardVideoAnnex(url, id).then((response) => {
        if (response != undefined) {
          if (response.code == 200) {
            let type = 'success'
            this.$notification[type]({
              message: '温馨提示',
              description: '附件上传成功!',
              duration: 3,
            })
            this.getDataInfoFunction()
          }
        }
      })
    },

    //上传附件
    sendId(id) {
      this.linshiId = id
    },
    //代维管理员提交审核
    dwexamineEvent(id, annex) {
      let  belong = Vue.ls.get(USERINFO).belong
      let roleName = Vue.ls.get(USERINFO).roleName
      let name = Vue.ls.get(USERINFO).name
      let remark2 = belong+"-"+roleName+"-"+name+"-"+'提交审核'
      if (annex == null) {
          let type = 'error'
          this.$notification[type]({
            message: '温馨提示',
            description: '请上传附件!',
            duration: 3,
          })
          return
       }
      this.examineType==3 ? this.modifyVideoStatusFunction(id,2,'',remark2) :this.modifyVideoStatusFunction(id,2,1,remark2)
    },
    //区县管理员审核
    examineEvent(id, annex) {
      let  belong = Vue.ls.get(USERINFO).belong
      let roleName = Vue.ls.get(USERINFO).roleName
      let name = Vue.ls.get(USERINFO).name
      let remark1 = belong+"-"+roleName+"-"+name+"-"+'已审核'
      if (this.examineType == 1) {
        this.modifyVideoStatusFunction(id,3,'',remark1)
      } else if (this.examineType == 2) {
        this.modifyVideoStatusFunction(id,1,'',remark1)
      } else if (this.examineType == 4) {
        this.modifyVideoStatusFunction(id,1,1,remark1)
      }
    },
    //驳回
    rejectEvent(id) {
      let  belong = Vue.ls.get(USERINFO).belong
      let roleName = Vue.ls.get(USERINFO).roleName
      let name = Vue.ls.get(USERINFO).name
      let remark = belong+"-"+roleName+"-"+name+"-"+'驳回'
      if (this.examineType == 1) {
        this.modifyVideoStatusFunction(id, 4,'',remark)
      } else if (this.examineType == 2) {
        this.modifyVideoStatusFunction(id, 5,'',remark)
      }else if (this.examineType == 4) {     
        this.modifyVideoStatusFunction(id,5,1,remark)
      }
    },
    //取消
    quxiaoEvent(id) {
      let  belong = Vue.ls.get(USERINFO).belong
      let roleName = Vue.ls.get(USERINFO).roleName
      let name = Vue.ls.get(USERINFO).name
      let remark = belong+"-"+roleName+"-"+name+"-"+'取消'
      this.modifyVideoStatusFunction(id,0,'',remark)
    },
    //成功
    successEvent() {
      this.modifyShow = false
      this.addShow = false
      this.reload()
    },
    //新增
    addEvent() {
      this.addShow = true
    },
    //修改
    modifyEvent(e, audit) {
      this.id = JSON.parse(JSON.stringify(e))
      this.modifyShow = true
    },
    //查看详情
    detailsEvent(e) {
      this.id = JSON.parse(JSON.stringify(e))
      this.detailsShow = true
    },
    cancelEvent() {
      this.modifyShow = false
      this.addShow = false
      this.detailsShow = false
    },
    //审核
    modifyVideoStatusFunction(id,status,pass,remark) {
      modifyVideoStatus(id,status,pass,remark).then((response) => {
        if (response != undefined) {
          if (response.code == 200) {
            let type = 'success'
            this.$notification[type]({
              message: '温馨提示',
              description: '操作成功!',
              duration: 3,
            })
            this.getDataInfoFunction()
          }
        }
      })
    },
    //获取表格数据
    getDataInfoFunction() {
      this.tableLoading = true
      getList(this.current,this.pageSize,this.country,'',this.flag,'',this.uploadInfo.memberId,'','')
        .then((response) => {
          const pagination = { ...this.pagination }
          pagination.total = response.data.total
          pagination.pageSize = this.pageSize
          this.pagination = pagination
          this.pagination.current = response.data.current
          this.data = response.data.records
          let chekcList = []
          this.checkList = response.data.records.map((ele, index) => {
            if (ele.audit == 2) {
              chekcList.push(ele)
            }
            return checkList
          })
          this.tableLoading = false
        })
        .catch((error) => {
          this.tableLoading = false
        })
    },
    //分页
    pageShow(pagination) {
      this.tableLoading = true
      getList(pagination.current, pagination.pageSize,this.country,'',this.flag,'',this.uploadInfo.memberId,'','')
        .then((response) => {
          const pagination = { ...this.pagination }
          pagination.total = response.data.total
          pagination.pageSize = this.pageSize
          this.pagination = pagination
          this.pagination.current = response.data.current
          this.data = response.data.records
          this.tableLoading = false
        })
        .catch((error) => {
          this.tableLoading = false
        })
    },

    onChange(e) {},
    // 标签切换
    callBack(key){
      key == 1 ? this.flag = 3 :  this.flag = 2
      this.getDataInfoFunction()
    }

  },
}
const columnstable = [
  {
    title: '基础信息',
    align: 'center',
    children: [
      {
        title: '项目名称',
        dataIndex: 'projectName',
        width: 100,
        align: 'center',
      },

      {
        title: '区县',
        dataIndex: 'country',
        width: 100,
        align: 'center',
      },
      {
        title: '维护等级',
        dataIndex: 'level',
        width: 100,
        align: 'center',
      },
      {
        title: '资管编号',
        dataIndex: 'number',
        width: 100,
        align: 'center',
      },

      {
        title: '客户名称',
        dataIndex: 'customer',
        width: 100,
        align: 'center',
      },
      {
        title: '客户地址',
        dataIndex: 'customerArea',
        width: 100,
        align: 'center',
      },
      {
        title: '客户姓名',
        dataIndex: 'customerName',
        width: 100,
        align: 'center',
      },
      {
        title: '联系方式',
        dataIndex: 'customerMobile',
        width: 100,
        align: 'center',
      },
      {
        title: '业务情况',
        dataIndex: 'sceneUse',
        width: 100,
        align: 'center',
      },
      {
        title: '场景类型',
        dataIndex: 'sceneType',
        width: 100,
        align: 'center',
      },
      {
        title: '探头数量',
        dataIndex: 'camera',
        width: 100,
        align: 'center',
      },
    ],
  },
  {
    title: '传输信息',
    align: 'center',
    children: [
      {
        title: '接入类型',
        dataIndex: 'accessType',
        width: 100,
        align: 'center',
      },
      {
        title: '专线IP',
        dataIndex: 'lineIp',
        width: 100,
        align: 'center',
      },
      {
        title: '跳纤路由',
        dataIndex: 'route',
        width: 100,
        align: 'center',
      },
      {
        title: '接入光交名称',
        dataIndex: 'lightCross',
        width: 100,
        align: 'center',
      },
    ],
  },
  {
    title: '存储方式',
    dataIndex: 'storeType',
    width: 100,
    align: 'center',
  },
   {
    title: '审核状态',
    dataIndex: 'audit',
    align: 'center',
    scopedSlots: { customRender: 'audit' },
  },
  {
    title: '附件',
    dataIndex: 'action1',
    width: 200,
    align: 'center',
    // fixed: 'right',
    scopedSlots: { customRender: 'action1' },
  },
  {
    title: '审核',
    dataIndex: 'action3',
    width: 100,
    align: 'center',
    fixed: 'right',
    scopedSlots: { customRender: 'action3' },
  },
  {
    title: '操作',
    dataIndex: 'operation',
    width: 150,
    align: 'center',
    fixed: 'right',
    scopedSlots: { customRender: 'operation' },
  },
]
const newcolumnstable = [
  {
    title: '基础信息',
    align: 'center',
    children: [
      {
        title: '项目名称',
        dataIndex: 'projectName',
        width: 100,
        align: 'center',
      },

      {
        title: '区县',
        dataIndex: 'country',
        width: 100,
        align: 'center',
      },
      {
        title: '维护等级',
        dataIndex: 'level',
        width: 100,
        align: 'center',
      },
      {
        title: '资管编号',
        dataIndex: 'number',
        width: 100,
        align: 'center',
      },
      {
        title: '客户名称',
        dataIndex: 'customer',
        width: 100,
        align: 'center',
      },
      {
        title: '客户地址',
        dataIndex: 'customerArea',
        width: 100,
        align: 'center',
      },
      {
        title: '客户姓名',
        dataIndex: 'customerName',
        width: 100,
        align: 'center',
      },
      {
        title: '联系方式',
        dataIndex: 'customerMobile',
        width: 100,
        align: 'center',
      },
      {
        title: '业务情况',
        dataIndex: 'sceneUse',
        width: 100,
        align: 'center',
      },
      {
        title: '场景类型',
        dataIndex: 'sceneType',
        width: 100,
        align: 'center',
      },
      {
        title: '探头数量',
        dataIndex: 'camera',
        width: 100,
        align: 'center',
      },
    ],
  },
  {
    title: '传输信息',
    align: 'center',
    children: [
      {
        title: '接入类型',
        dataIndex: 'accessType',
        width: 100,
        align: 'center',
      },
      {
        title: '专线IP',
        dataIndex: 'lineIp',
        width: 100,
        align: 'center',
      },
      {
        title: '跳纤路由',
        dataIndex: 'route',
        width: 100,
        align: 'center',
      },
      {
        title: '接入光交名称',
        dataIndex: 'lightCross',
        width: 100,
        align: 'center',
      },
    ],
  },
  {
    title: '存储方式',
    dataIndex: 'storeType',
    width: 100,
    align: 'center',
  },
 
  {
    title: '附件',
    dataIndex: 'action1',
    width: 200,
    align: 'center',
    scopedSlots: { customRender: 'action1' },
  },
   {
    title: '审核状态',
    dataIndex: 'remark',
    // width: 100,
    // fixed: 'right',
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: 'action3',
    width: 200,
    align: 'center',
    fixed: 'right',
    scopedSlots: { customRender: 'action3' },
  },
]
</script>
<style>
.titleTop {
  height: 51px;
  text-align: center;
  line-height: 51px;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
  
}
</style>